/**
 * Created by Administrator on 2017/8/4.
 */



import React from 'react'
import {StyleSheet,Dimensions,View,Image,TextInput,Text,TouchableOpacity,ToastAndroid} from 'react-native'

import RequestUtils from '../Common/NetUtils'
import constant from '../Common/Constant'

let bc_img = require('../Img/bg_2x.png')

const ScreenSize = {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height
};

const styles = StyleSheet.create({
    imgSty:{
        width:ScreenSize.width,
        height:ScreenSize.height+25,
        alignItems:'center',
        resizeMode:'cover',
    },
    inputLl:{
        marginRight:32,
        marginLeft:32,
        width:ScreenSize.width-64,
        height:50,
        flexDirection:'row',
        alignItems:'center',
        borderBottomColor:'#fff',
        borderBottomWidth:1
    },
    inputImg:{
        width:22,
        height:25,
        marginLeft:16
    },
    inputTv:{
        marginLeft:12,
        flex:1,
        color:'#fff'
    },
    tv:{
        color:'#fff',
        fontSize:16
    },
    login:{
        marginRight:32,
        marginLeft:32,
        width:ScreenSize.width-64,
        height:45,
        borderRadius:22.5,
        backgroundColor:'#fff',
        alignItems:'center',
        justifyContent:'center'
    },
})

export default class RegisterOrUpdate extends React.Component{

    static navigationOptions = ({ navigation }) =>({
        headerStyle:{
            height:0
        }
    })

    constructor(props){
        super(props)
        this.state = {
            input_phone:'',
            input_pw:'',
            input_re_pw:'',
            input_code:''
        }
    }

    render(){
        return(

            <Image style={styles.imgSty} source={bc_img}>
                <View style={[styles.inputLl,{marginTop:66}]}>
                    <Text style={{color:'#fff'}}>帐号：</Text>
                    <TextInput style={styles.inputTv} placeholder='请输入手机号' placeholderTextColor='#fff' underlineColorAndroid='transparent'
                               onChangeText={(text) => this.setState({input_phone:text})}/>
                </View>

                <View style={[styles.inputLl,{marginTop:16}]}>
                    <Text style={{color:'#fff'}}>密码：</Text>
                    <TextInput style={styles.inputTv} placeholder='请输入您的密码' placeholderTextColor='#fff' underlineColorAndroid='transparent'
                               onChangeText={(text) => this.setState({input_pw:text})}/>
                </View>

                <View style={[styles.inputLl,{marginTop:16}]}>
                    <Text style={{color:'#fff'}}>确认密码：</Text>
                    <TextInput style={styles.inputTv} placeholder='请再次输入您的密码' placeholderTextColor='#fff' underlineColorAndroid='transparent'
                               onChangeText={(text) => this.setState({input_re_pw:text})}/>
                </View>

                <View style={[styles.inputLl,{marginTop:16}]}>
                    <View style={{flex:9,height:50,backgroundColor:'transparent',flexDirection:'row', alignItems:'center'}}>
                        <Text style={{color:'#fff'}}>验证码：</Text>
                        <TextInput style={styles.inputTv}  underlineColorAndroid='transparent'
                                   onChangeText={(text) => this.setState({input_code:text})}/>
                    </View>
                    <TouchableOpacity style={{flex:4,height:50,backgroundColor:'transparent',alignItems:'center',justifyContent:'center'}}
                                      onPress={()=>this._getSmsCode()}>
                        <Text style={{color:'#fff',borderLeftColor:'#fff',borderLeftWidth:1,height:35,padding:8,fontSize:14}}>获取验证码</Text>
                    </TouchableOpacity>
                </View>


                <TouchableOpacity style={[styles.login,{marginTop:45}]}
                                  onPress={()=>this._userRegister()}>
                    <Text style={[styles.tv,{color:'#20AE8D'}]}>注册</Text>
                </TouchableOpacity>

            </Image>
        )
    }



    _userRegister(){
        if(this.state.input_code === '' || this.state.input_re_pw ==='' || this.state.input_pw ==='' || this.state.input_phone === ''){
            ToastAndroid.show('数据不完整',ToastAndroid.SHORT)
            return;
        }
        // let params = {phone:'18328676067',
        //     password:'123456',password_confirm:'123456',sms_code:'197040'};
        let formData = new FormData();
        formData.append('phone',this.state.input_phone);
        formData.append('password',this.state.input_pw);
        formData.append('password_confirm',this.state.input_re_pw);
        formData.append('sms_code',this.state.input_code);

        RequestUtils.post(constant.URL_USER_REGISTER,formData,'',(result)=>{
            this.props.navigation.state.params.onResult('注册成功，请等待帐号审核')
            this.props.navigation.goBack()
        })
    }



    _getSmsCode(){
        if(this.state.input_phone === ''){
            ToastAndroid.show('请输入手机号码',ToastAndroid.SHORT)
            return;
        }
        let params = {'phone':this.state.input_phone,'sms_code_type':1}
        RequestUtils.getData(constant.URL_SMS_CODE,params,(result)=>{
            ToastAndroid.show('验证码发送成功',ToastAndroid.SHORT)
        })
    }
}